<template name="my">
	<view class="app-bg flex-direction">
		<!-- <cu-custom bgColor="bg-gradual-primary" :isBack="false">
			<block slot="content">我的</block>
		</cu-custom> -->
		<view class="flex padding-xl xl bg-primary">
			<image class="cu-avatar xl round " :src="userInfo.avatar"></image>

			<view class="flex flex-direction justify-between padding-xs">
				<view class="text-xl">{{userInfo.nickName}}</view>
				<view>平均月经周期：{{userInfo.avrgMenstruationDuration}}天</view>

			</view>
			<view class="flex justify-end  align-center" style="flex: 1;">
				<view class="cu-btn round btn-setting self-center" @click="settingClick">设置</view>
			</view>

		</view>

		<view class="app-bg-common" style="height: 20rpx;">
		</view>

		<view class="app-bg-common">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					我的记录
				</view>
			</view>

			<!-- list item -->
			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">


				<view class="cu-item" :class="menuArrow?'arrow':''" v-for="(item,index) in recordList" :key="index">
					<view class="flex content justify-between text-sm" @tap="itemClick(index)">
						<text class="text-df">{{item.ymStartTime}} 至 {{item.ymEndTime}}</text>
						<text v-if="item.ymPersist">持续：{{item.ymPersist}}天</text>
					</view>
				</view>


			</view>

		</view>





	</view>
</template>

<script>
	import helper from '../../common/helper.js';
	import Bus from '../../common/bus.vue';
	export default {
		name: "my",
		data() {
			return {
				userInfo: {
					// "userId": 517,
					// "username": null,
					// "platform": "qq",
					// "mobile": null,
					// "password": null,
					// "createTime": "2019-11-20 17:16:51",
					// "wxMiniOpenId": "E7C8FB9DB99E318094E437849454D6A7",
					// "nickName": "郑大钱",
					// "userStatus": null,
					// "avatar": "https://thirdqq.qlogo.cn/qqapp/1109746067/E7C8FB9DB99E318094E437849454D6A7/100",
					// "sex": "1",
					// "weight": 1,
					// "avrgMenstruationDuration": 28,
					// "avraMenstruationInterval": null,
					// "smsAlert": null,
					// "emailAlert": null,
					// "alertFrontDays": null,
					// "alertTime": null,
					// "email": null
				},
				hasUserInfo: false,
				menuArrow: true,
				menuBorder: true,
				menuCard: false,

				recordList: [{
					id: 1,
					ymStartTime: "11月14日",
					ymEndTime: "11月18日",
					ymPersist: "3"
				}]
			}
		},
		created() {
			console.log('created 组件创建完毕状态===============》');
			let that = this;
			//查看是否授权
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log(res);
					if (res.errMsg === 'getStorage:ok') {
						that.userInfo = res.data;
						that.hasUserInfo = true;
						that.getUserRecord();
					} else {
						that.hasUserInfo = false;
					}
				},
				fail: function(e) {
					console.log(e);
				}
			});
			Bus.$on('recordChange', target => {
				console.log('my bus recordChange');
				let that = this;
				//查看是否授权
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						console.log(res);
						if (res.errMsg === 'getStorage:ok') {
							that.userInfo = res.data;
							that.hasUserInfo = true;
							that.getUserRecord();
						} else {
							that.hasUserInfo = false;
						}
					},
					fail: function(e) {
						console.log(e);
					}
				});
			});
			Bus.$on('userInfo', target => {
				console.log('my bus userInfo');
				//查看是否授权
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						console.log(res);
						if (res.errMsg === 'getStorage:ok') {
							that.userInfo = res.data;
							that.hasUserInfo = true;
						} else {
							that.hasUserInfo = false;
						}
					},
					fail: function(e) {
						console.log(e);
					}
				});
			});

		},

		beforeDestroy() {
			console.log('my beforeDestroy');
			Bus.$off('recordChange');
			Bus.$off('userInfo');
		},
		methods: {
			itemClick(index) {
				console.log(index);
				var record = this.recordList[index];
				//在起始页面跳转到test.vue页面并传递参数
				getApp().globalData.text = 'test';
				getApp().globalData.myClicItemData = record;
				uni.navigateTo({
					url: '../my/ym-detail/ym-detail?from=myItemClick'
				});
			},

			settingClick() {
				uni.navigateTo({
					url: '../my/settings/settings'
				});
			},



			// 调用服务器
			getUserRecord() {

				let that = this;
				let playod = {
					userId: that.userInfo.userId
				};

				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: helper.api + '/appYmrecord/open/getRecordByUserId', //仅为示例，并非真实接口地址。
					method: 'get',
					data: playod,
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},
					complete() {
						uni.hideLoading();
					},
					success: (res) => {
						console.log(res.data);

						if (res.data.code === 0) {
							that.recordList = res.data.data;

							// todo 刷新数据
						} else {
							uni.showModal({
								title: '请求失败！',
								content: '错误原因:' + res.data.msg,
								showCancel: false
							});
							return;
						}
					},
					fail: (err) => {
						uni.showModal({
							title: '请求失败！',
							content: '错误原因:' + err,
							showCancel: false
						});
					}
				});
			}


		}
	}
</script>

<style>
	
	.btn-setting{
		border-color: #ffffff;
		color: #ffffff;
		border-radius: 25px;
		border: 1rpx solid #ffffff;
	}

</style>
